<template>
  <div class="article-box">
    <TipsView :icon="Tipsicon" :text="Tipstext" ref="childTips"></TipsView>
    <div class="article-header">
        <div class="article-title">
            <div class="article-item " @click="goUpArticle">
                上传文章
            </div>
             <div class="article-item article-item-active" @click="goUpVideo">
                上传视频
            </div>
        </div>
    </div>
    <div class="content-box">
        <div class="content">
            <div>
                <div class="row">
                    <div class="row-title">上传文件</div>
                    <div class="file-tips">
                        请勿上传色情，反动等违法视频,请上传1GB以下的视频。
                    </div>
                </div>

                <div class="row" v-if="!uploadVideoState">
                    <!-- 上传视频 -->
                    <div class="row-video-box"  >
                       <div class="row-video"  @dragover.prevent="moveDragover" @drop.prevent="moveDrop($event)">
                        <input class="file-video" type="file" @change="handerVideo" ref="fileVideo">
                        <div class="upload-video" >
                            <div class="video-tips-icon">
                                <span >
                                    <i class="iconfont icon-shangchuan"></i>
                                </span>
                            </div>
                            <div class="video-tips-text">
                                <span>拖拽视频到此处也可上传</span>
                            </div>
                            <div class="video-button" @click="uploadVideo()">
                                <div class="button-info">上传视频</div>
                            </div>
                        </div>

                        </div>

                    </div>
                </div>
                <div  v-else>
                    <div class="row">
                    <div class="upload-video-loading">
                          <!-- 进度条 -->
                            <div class="speed-loading">
                                <div class="speed-loading-finish" ref="speedProgress"></div>
                            </div>
                            <div class="upload-speed">
                                <div class="loading-text">
                                    <div v-if="!speedState" class="active-text text">上传中</div>

                                    <div v-else-if="speedState" class="finish-text text">上传完成</div>
                                    <div class="speed-progress">
                                      {{this.ProgressNum+"%"}}
                                    </div>
                                </div>
                                <div class="loading-right">
                                  <!-- 删除上传的视频 -->
                                  <!-- <div class="delete" @click="cancelUpload">
                                    <span>删除</span>
                                  </div> -->
                                </div>
                            </div>
                            <div class="upload-video-cover">
                              <div class="video-cover-info">
                                <input class="cover-input" type="file" ref="videoCover" @change="uploadCover">
                                <img  :src="srcUrl" alt="" :style="coverstyle">
                                <div class="custom-cover" @click="handerCustomCover">
                                  <span>上传封面</span>
                                </div>
                              </div>
                              <div class="cover-tips">
                              <span>视频文件中截取的封面是第一帧，你也可以上传自定义封面图</span>
                            </div>
                            </div>

                        </div>
                </div>
                <div class="row ">
                    <div class="row-title">标题</div>
                    <div class="row-input" >
                         <input  type="text" v-focus placeholder="填写标题(0~30字)" maxlength='30' name="title" v-model="title">
                         <span class="num-max">{{title.length}}/30</span>
                    </div>
                </div>
                 <div class="row ">
                    <div class="row-title">
                        <span class="title-info">
                            视频分类
                            <span class="explain" @mousemove="articleState=true" @mouseout="articleState=false"><i class="iconfont icon-bangzhu"></i></span>
                            <div class="explain-box" v-if="articleState">
                                <h2>视频分类</h2>
                                <p>1.视频分类是必选项。</p>
                                <p>2.视频分类将决定推荐给喜欢该类作品的用户。</p>
                                <p>3.视频分类可能让你的作品得到更多曝光，提升热度。</p>
                            </div>
                        </span>

                        <span class="checked-box" v-for="(item,index) in  articletypelist" :key="item.id" @click="handerarticletype(index)">
                            <input type="radio" name="articletype" :value="item.text" id="articletype" v-model="articletype"   >
                            <label for="articletype"></label>
                            <span class="text">{{item.text}}</span>
                        </span>

                    </div>

                </div>
                <div class="row ">
                    <div class="row-title">设置视频介绍</div>
                    <div class="row-input " ref="rowInput">
                         <textarea   class="input-info" ref="textarea_input" :key="forceUpdateKey" v-focus placeholder="填写文章正文"  name="content" v-model="content" />
                    </div>
                    <div class="row-action">
                        <div class="action-left">
                            <span class="EmotionButton" @click="OpenEmotions()">
                                <i class="iconfont icon-biaoqing IconfontSize"></i>
                            </span>
                             <Emo ref="EmotionB" @AppendInputValue="AppendMessageText" />
                        </div>
                        <div class="action-right">
                            <div class="action-text-num">{{content.length===0? '':content.length}}</div>
                            <div class="action-state" @click="showList=true">{{stateText}}<span class="icon-slecet"><i class="iconfont icon-xiajiantou"></i></span></div>
                            <div class="action-state-list" v-if="showList">

                                <div v-for="(item) in statelist" :key="item.id" @click="handerState(item.text)" :class="stateText=== item.text?'action-state-item action-state-active':'action-state-item'"   >
                                    {{item.text}}
                                </div>
                            </div>
                            <div class="action-sub" @click="subVideo()">
                                发布视频
                            </div>
                        </div>
                    </div>
                </div>
                </div>

            </div>
        </div>
    </div>
  </div>
</template>

<script>
import Emo from '@/components/utilView/emoView.vue'
import TipsView from '@/components/utilView/tipView.vue'
import SparkMD5 from 'spark-md5'
import { mapState } from 'vuex'
import http from '@/util/http'
export default {
  components: {
    Emo,
    TipsView
  },
  data () {
    return {
      picList: [], // 预览图片列表
      articletypelist: [
        {
          id: 1,
          text: '萌宠'
        },
        {
          id: 2,
          text: '科普'
        },
        {
          id: 3,
          text: '种草'
        },
        {
          id: 4,
          text: '异宠'
        }
      ], // 文章分类
      statelist: [
        {
          id: 1,
          text: '公开'
        },
        {
          id: 2,
          text: '仅自己可见'
        }
      ], // 设置文章状态的列表
      stateText: '公开', // 选定的状态
      showList: false, // 显示文章状态的列表
      articleState: false, // 显示文章分类说明
      title: '', // 文章的标题
      articletype: '萌宠', // 文章分类
      content: '', // 文章内容
      forceUpdateKey: 0, // 文章正文框刷新的变量
      uploadVideoState: false, // 当前是否在上传视频的变量 上传中为true 未上传为false
      speedState: false, // 控制显示视频上传的提示文字 值是false ->（上传中） true ->（上传完成）
      count: 0, // 切片的数量
      coindex: 0, // 合并切片的变量
      chunkIndex: 0, // 每上传一个切片加1
      ProgressNum: 0, // 进度条的百分比的值
      srcUrl: null, // 视频封面
      coverbox: null, // 存放视频的file对象封面图
      // customCoverFile: null // 自定义上传的封面
      coverstyle: {
        width: null,
        height: null,
        top: 0,
        left: 0,
        display: 'block'
      }, // 封面图的变量
      video_name: null, // 视频上传成功后后端返回的视频名字
      video_duration: 0, // 上传视频的播放时长
      videoFile: null, // 存储上传视频的file对象
      Tipsicon: 'icon-jinggao', // 传入提示组件的图标
      Tipstext: '' // 传入提示组件的提示信息
    }
  },
  computed: {
    ...mapState(['user'])
  },
  watch: {

    // 单选框选择文章分类
    articletype (newval) {
    //   console.log(newval, oldval)
      this.articletype = newval
      console.log(this.articletype)
    },
    // 监听文章正文的输入
    content (newVal, oldVal) {
      if (oldVal === newVal) {
        return
      }
      this.content = newVal
      this.forceUpdateKey += 0
      this.changeTextareaHeight()
      this.$nextTick(() => {
        this.$refs.textarea_input.focus()
      })
    }
  },
  mounted () {

  },
  methods: {
    // tipsMethod 显示提示框调用的方法
    tipsMethod (text, icon) {
      this.$refs.childTips.HanderTiming(1500)
      // 写入提示的文字
      this.Tipstext = text
      this.Tipsicon = icon
    },
    // 跳转上传文章
    goUpArticle () {
      this.$router.push({ path: '/upload/uparticle' })
    },

    // 打开表情包弹框
    OpenEmotions () {
      this.$refs.EmotionB.OpenEmotion(true)
    },
    // 表情选中后追加在input
    AppendMessageText (EmotionChinese) {
      this.content += EmotionChinese
    },
    //
    handerState (text) {
      this.stateText = text
      // 隐藏选择列表
      this.showList = false
    },
    // 正文本输入框高度调节
    changeTextareaHeight () {
      const _this = this
      this.$nextTick(() => {
        const textarea = _this.$refs.textarea_input
        const scrollHeight = textarea.scrollHeight // 控件所有的高度，包含滚动的那部分(不可见也会有高度)
        const height = textarea.offsetHeight // 屏幕上显示的高度
        if (height <= scrollHeight) {
          textarea.style.height = 'auto' // 恢复默认值，这个作用就是根据内容自适应textarea高度
          _this.$refs.rowInput.style.height = 'auto' // 恢复默认值，这个作用就是根据内容自适应textarea高度
          textarea.style.height = textarea.scrollHeight + 'px' // 拿到最新的高度改变textarea的高度
          _this.$refs.rowInput.style.height = textarea.scrollHeight + 'px'
        }
      })
    },
    // 截取视频的第一帧作为封面图
    async getVideoCover (file) {
      const fileUrl = URL.createObjectURL(file)
      const videoElement = document.createElement('VIDEO')
      videoElement.currentTime = 2
      videoElement.src = fileUrl
      await videoElement.addEventListener('canplay', async () => {
        const { videoWidth, videoHeight } = videoElement // 获取video的宽高
        console.log(videoWidth, videoHeight)
        const x = 0
        const y = 0

        let width = 0
        let height = 0
        // 控制图片的大小 缩小
        if (videoWidth > videoHeight && videoWidth > 720 && videoHeight > 720) {
          width = videoWidth * 0.6
          height = videoHeight * 0.6
        } else if (videoWidth < videoHeight && videoWidth > 720 && videoHeight > 720) {
          width = videoWidth * 0.6
          height = videoHeight * 0.6
        } else {
          width = videoWidth
          height = videoHeight
        }
        // 计算缩小后图片的宽高以及canvas绘制的位置信息

        const canvas = document.createElement('canvas')
        canvas.width = width
        canvas.height = height
        const ctx = canvas.getContext('2d')
        // ctx.fillStyle = '#000'
        ctx.fillRect(0, 0, width, height)
        ctx.drawImage(videoElement, x, y, width, height)
        const src = canvas.toDataURL('image/png') // 完成base64图片的创建
        // 将封面图的base64渲染到页面
        this.$nextTick(() => {
          this.srcUrl = src
          this.coverstyle = this.covers(width, height)
        })
        console.log('图像', ctx)
        this.coverbox = await this.dataURLtoFile(src, 'a.png')
      })
    },
    // 自定义上传封面
    handerCustomCover () {
      this.$refs.videoCover.click()
    },
    // 选择上传的封面触发
    uploadCover () {
      // 存储图片的file对象

      const coverFlie = this.$refs.videoCover.files[0]
      this.coverbox = this.$refs.videoCover.files[0]
      if (!coverFlie) return
      // 输出图片的宽高,图片进行处理
      this.imgUpload(coverFlie)
      // 创建一个变量存储BASE64
      let BASE64 = null
      // 将图片转换base64
      BASE64 = this.changeBASE64(coverFlie)
      BASE64.then(res => {
        // 将base64赋值给封面缩略图
        this.srcUrl = res
      })
    },
    // 将base64格式的图片信息转化成file对象的图片信息
    async dataURLtoFile (dataurl, filename) {
      const arr = dataurl.split(',')
      console.log(dataurl, '输出的图片路径------------')
      console.log(arr, '输出的图片路径')
      const mime = arr[0].match(/:(.*?);/)[1]
      const bstr = arr[1].toString('base64')
      let n = bstr.length
      const u8arr = new Uint8Array(n)
      while (n--) {
        u8arr[n] = bstr.charCodeAt(n)
      }
      // 输出图片的宽高,对封面图图进行渲染处理
      //
      const file = await new File([u8arr], filename, { type: mime })
      console.log('生成的file', file)

      return file
    },
    // 获取封面图片宽高的方法
    imgUpload (file) {
      console.log('传入的file', file)

      const _URL = window.URL || window.webkitURL
      const image = new Image()
      image.src = _URL.createObjectURL(file)
      console.log('获取宽高时输出的file', file)
      image.onload = async function () {
        const data = await this.covers(image.width, image.height)

        if (data.width && data.height) {
          this.coverstyle = data
        }
      }
    },
    // 获取图片宽高后对图片的处理函数
    covers: (w, h) => {
      const coverstyle = {
        width: null,
        height: null,
        top: 0,
        left: 0,
        display: 'block'
      }

      if (w > h) {
        coverstyle.width = w / h * 100 + '%'
        coverstyle.left = -(w / h - 1) / 2 * 100 + '%'
        coverstyle.height = '100%'
      } else if (w < h) {
        coverstyle.height = h / w * 100 + '%'
        coverstyle.left = -(h / w - 1) / 2 * 100 + '%'
        coverstyle.width = '100%'
      } else if (w === h) {
        coverstyle.height = '100%'
        coverstyle.top = -'25%'
        coverstyle.width = '100%'
      }
      return coverstyle
    },
    // 计算文件的大小 KB MB GB
    sizeTostr (size) {
      let data = ''
      if (size < 0.1 * 1024) { // 如果小于0.1KB转化成B
        data = size.toFixed(2) + 'B'
      } else if (size < 0.1 * 1024 * 1024) { // 如果小于0.1MB转化成KB
        data = (size / 1024).toFixed(2) + 'KB'
      } else if (size < 0.1 * 1024 * 1024 * 1024) { // 如果小于0.1GB转化成MB
        data = (size / (1024 * 1024)).toFixed(2) + 'MB'
      } else { // 其他转化成GB
        data = (size / (1024 * 1024 * 1024)).toFixed(2) + 'GB'
      }
      const sizestr = data + ''
      const len = sizestr.indexOf('.')
      const dec = sizestr.substr(len + 1, 2)
      if (dec === '00') { // 当小数点后为00时 去掉小数部分
        return sizestr.substring(0, len) + sizestr.substr(len + 3, 2)
      }
      return sizestr
    },

    // 生成视频文件的HASH值
    changeBuffer: (file) => {
      return new Promise(resolve => {
        const fileReader = new FileReader()
        fileReader.readAsArrayBuffer(file)
        fileReader.onload = ev => {
          const buffer = ev.target.result
          const spark = new SparkMD5.ArrayBuffer()
          let HASH = null
          let suffix = null
          spark.append(buffer)
          HASH = spark.end()
          suffix = /\.([a-zA-Z0-9]+)$/.exec(file.name)[1]
          resolve({
            buffer,
            HASH,
            suffix,
            filename: `${HASH}.${suffix}`
          })
        }
      })
    },
    // 上传视频，触发input框
    uploadVideo () {
      this.$refs.fileVideo.click()
    },
    // 手动上传视频
    handerVideo () {
      const file = this.$refs.fileVideo.files[0]
      // 存储file对象
      this.videoFile = this.$refs.fileVideo.files[0]
      if (!file) return
      console.log(file)
      // 上传视频的处理
      this.uploadFileVideo(file)
    },
    // 拖拽区域内移动
    moveDragover () {
    },
    // 放到拖拽容器当中
    moveDrop (e) {
      const file = e.dataTransfer.files[0]
      // 存储file对象
      this.videoFile = e.dataTransfer.files[0]
      if (!file) return
      console.log(file)
      // 上传视频的处理
      this.uploadFileVideo(file)
    },
    // 实现视频文件的上传 发送请求
    async uploadFileVideo   (file) {
      // 修改提示文字为上传中
      this.speedState = false
      // 修改展示页面，表示当前在上传内容
      this.uploadVideoState = true
      // 声明存放hash的变量
      let HASH = null
      // 文件名后缀
      let suffix = null
      // 存储已经上传的切片
      let already = []
      // 存储从服务器拿到的结果
      const data = []
      // 获取视频的第一帧作为封面
      this.getVideoCover(file)
      // 获取文件的HASH值
      await this.changeBuffer(file).then(res => {
        HASH = res.HASH
        suffix = res.suffix
        console.log(HASH, suffix)
      })
      try {
        // 获取已经上传的切片
        http.uploadVideoAlready(HASH).then(res => {
          already = res.fileList
          console.log(data, already)
        })
      } catch (error) {
        console.log(error)
      }
      // 文件的切片处理
      // 切片的单个大小
      let max = 1024 * 100
      // 切片的份数
      this.count = Math.ceil(file.size / max)
      // 切片的集合
      const chunks = []
      if (this.count > 100) {
        max = file.size / 100
        this.count = 100
      }
      // 分割切片
      while (this.chunkIndex < this.count) {
        chunks.push({
          file: file.slice(max * this.chunkIndex, max * (this.chunkIndex + 1)),
          filename: `${HASH}_${this.chunkIndex + 1}.${suffix}`
        })

        this.chunkIndex++
      }
      // 遍历分片的集合发送请求
      chunks.forEach(item => {
        // 已经上传的无需在上传
        if (already.length > 0 && already.includes(item.filename)) {
          this.complate(HASH)
          return
        }

        const fm = new FormData()
        fm.append('filename', item.filename)
        fm.append('file', item.file)

        // 发送请求 上传切片
        http.uploadVideoChunk(fm).then(res => {
          if (+res.data.ok === 1) { this.complate(HASH) }
        }).catch((err) => {
          console.log(err)
        })
      })
    },
    // 视频上传进度管控
    complate  (HASH) {
      // 所有切片上传成功
      this.coindex++
      this.$refs.speedProgress.style.width = `${this.coindex / this.count * 100}%`
      this.ProgressNum = Math.ceil(this.coindex / this.count * 100)
      if (this.coindex < this.count) return
      const fm = new FormData()
      fm.append('HASH', HASH)
      fm.append('count', this.count)
      http.uploadVideoMerge(fm).then(res => {
        console.log(res.data)
        if (+res.data.ok === 1) {
          console.log('合并成功')
          console.log(res.data)
          this.video_name = res.data.filename
          // 提示上传成功 显示上传成功的文字
          this.speedState = true
        } else {
          console.log('合并失败')
        }
      })
    },
    // 获取上传视频的播放时长
    getMp4Time (file) {
      return new Promise((resolve) => {
        // 把file转成url
        const url = URL.createObjectURL(file)
        // 获取对象
        const audioElement = new Audio(url)
        // 监听事件
        audioElement.addEventListener('loadedmetadata', () => {
          const time = Math.round(audioElement.duration * 100) / 100
          resolve(time)
        })
        audioElement.addEventListener('error', () => {
          resolve(0)
        })
      })
    },
    // 取消上传视频
    // cancelUpload () {
    //   // 调用终止axios的方法
    //   http.cancelUpload()
    // },
    // 发布视频
    subVideo () {
      let state = 0
      // 判断文章状态
      if (this.stateText === '公开') {
        state = 0
      } else if (this.stateText === '仅自己可见') {
        state = 1
      }

      if (!this.speedState) {
        if (!this.videoFile) {
          this.tipsMethod('视频未上传')
          return
        }
        this.tipsMethod('视频上传中')
        return
      }
      if (this.title === '') {
        this.tipsMethod('请填写标题')
        return
      }
      if (this.content === '') {
        this.tipsMethod('请填写正文')
        return
      }

      // 发布视频文章
      this.getMp4Time(this.videoFile).then(res => {
        // res是获取视频的时长
        console.log('时间', res)
        const fm = new FormData()
        fm.append('uid', this.user.uid) // 上传视频的用户id
        fm.append('video_title', this.title) // 视频的标题
        fm.append('video_content', this.content)// 视频的正文内容
        fm.append('state', state) // 视频的公共状态
        fm.append('video_type', this.articletype) // 文章的分类
        fm.append('video_duration', res) // 视频时长
        fm.append('video_url_name', this.video_name) // 存储的视频名称
        fm.append('video_cover', this.coverbox) // 封面图的file对象
        http.addVideoPage(fm).then(res => {
          console.log(res.data)
          if (+res.data.ok === 1) {
            // 成功
            this.tipsMethod(res.data.message, 'icon-duigoux')
            setTimeout(() => {
              this.$router.push({ path: '/video/allvideo' })
            }, 1000)
          } else if (+res.data.ok === 0) {
            this.tipsMethod(res.data.message)
          }
        })
      })
    },

    // 把选择的文件读取成为BASE64方法
    changeBASE64: (file) => {
      return new Promise(resolve => {
        const fileReader = new FileReader()
        fileReader.readAsDataURL(file)
        fileReader.onload = ev => {
          resolve(ev.target.result)
        }
      })
    }

  },
  directives: {
    focus: {
      mounted (el) {
        const father = el.parentNode
        el.onfocus = function () {
          father.className = 'item_info_focus row-input'
        }
        el.onblur = function () {
          father.className = 'row-input '
        }
      }
    }
  }
}
</script>

<style lang='scss' scoped>
    .article-box{
        width: 90%;
        margin: 0 auto;
        min-height: 1100px;
        background: #fff;
        .article-header{
            width: 40%;
            height: 50px;
            line-height: 50px;
            min-width: 300px;
            margin: 0 auto;
            .article-title{
                 display: flex;
                height: 50px;
                line-height: 50px;
                .article-item{
                    flex: 1;
                    text-align: center;
                    cursor: pointer;
                    &:hover{
                        color: #f60;
                    }
                }
                .article-item-active{
                    font-weight: 700;
                    color: #f60;
                }

            }
        }
        .content-box{
            width: 100%;
            border-top: 1px solid rgb(233, 233, 233);
            min-height: 600px;
            .content{
                width: 60%;
                margin-top: 20px;
                min-height: 400px;
                margin: 0 auto;

                .row{
                    width: 100%;
                    margin: 10px 0;
                    padding: 10px 0;
                    padding-bottom: 20px;
                    border-bottom: 1px solid rgb(241, 241, 241);
                    .file-tips{
                        width: 100%;
                        font-size: 12px;
                        line-height: 16px;
                        margin: 10px 0;
                        color: #979799;

                    }
                    .row-video-box{
                      .row-video{
                        width: 100%;
                        margin-top: 25px;
                        min-height: 400px;
                        border: 1px dotted #b4b4b4;
                        box-sizing: border-box;
                        display: flex;
                        flex-wrap: wrap;
                        .file-video{
                            display: none;
                        }
                        .upload-video{
                            margin: auto;
                            width: 200px;
                            height: 200px;
                            .video-tips-icon{
                                width: 100%;
                                text-align: center;
                                i{
                                    font-size: 40px;
                                    color: #808080;
                                }
                            }
                            .video-tips-text{
                                margin-top: 10px;
                                text-align: center;
                                font-size: 14px;
                                 color: #808080;
                            }
                            .video-button{
                                margin-top: 40px;
                                width: 100%;
                                .button-info{
                                    width: 120px;
                                    margin: 0 40px;
                                    height: 36px;
                                    line-height: 36px;
                                    text-align: center;
                                    border-radius: 20px;
                                    font-weight: 700;
                                    color: white;
                                    background: #ff8200;
                                    cursor: pointer;
                                    &:hover{
                                        background: #f60;
                                    }
                                }
                            }

                        }

                    }

                    }
                    .upload-video-loading{
                            width: 100%;
                            height: 250px;
                            background: #fff;
                            .speed-loading{
                                width: 100%;
                                height: 10px;
                                margin-top: 10px;
                                border-radius: 4px;
                                background: #ccc;
                                overflow: hidden;
                                position: relative;
                                .speed-loading-finish{
                                top: 0 ;
                                left: 0;
                                position: absolute;
                                height: 10px;
                                background: #ff8200;
                                transition: width .3s;
                            }
                            }
                            .upload-speed{
                              width: 100%;
                              margin: 3px 0;
                              margin-top: 10px;
                              display: flex;
                              justify-content: space-between;

                              .loading-text{
                                display: flex;
                                div{
                                  display: inline-block;
                                }
                                .text{
                                  width: 60px;
                                  font-size: 12px;
                                }
                                div{
                                  &:nth-of-type(1){
                                    font-size: 12px;
                                  }
                                }
                                .speed-progress{
                                  margin-left: 0px;
                                  font-size: 12px;
                                  color: #f60;
                                }
                              }
                              .loading-right{
                                display: flex;
                                font-size: 12px;

                                .delete{
                                  margin:  0 5px;
                                  span{
                                    cursor: pointer;
                                    &:hover{
                                      color: #f60;
                                    }
                                  }
                                }
                              }
                            }
                            .upload-video-cover{
                              margin-top: 30px;
                              width: 100%;
                              height: 200px;
                               .cover-tips{
                                  font-size: 12px;
                                  color: #979799;
                                  margin-top: 20px;
                                }

                              .video-cover-info{
                                width: 200px;
                                height: 120px;
                                border-radius: 8px;
                                background: #000;
                                overflow: hidden;
                                position: relative;
                                .cover-input{
                                  display: none;
                                }
                                img{
                                  object-fit: cover;

                                  cursor: pointer;
                                  filter: brightness(90%);
                                }
                                .custom-cover{
                                  cursor: pointer;
                                  position: absolute;
                                  bottom: 10px;
                                  left: 10px;
                                  color: #fff;
                                }
                              }

                            }

                        }
                    .row-title{
                        width: 100%;
                        margin-top: 15px;
                        font-size: 22px;
                        color: #000;
                        font-weight: 700;
                        .title-info{
                            margin-right: 20px;
                            position: relative;
                            .explain{
                                cursor: pointer;
                                i{
                                    font-size: 18px;
                                    color: #979799;
                                }
                            }
                            .explain-box{
                                position: absolute;
                                top: -60px;
                                left: 120px;
                                width: 200px;
                                height: 140px;
                                border-radius: 15px;
                                background: #fff;
                                padding: 10px;
                                border: 1px solid #efefef;
                                box-shadow: 3px 2px 2px rgb(240, 240, 240), -3px -2px 2px rgb(240, 240, 240);
                                z-index:901;

                                h2{
                                    text-align: center;
                                    font-size: 16px;
                                    line-height: 24px;
                                }
                                p{
                                    font-size: 12px;
                                    font-weight: normal;
                                    line-height: 20px;
                                    color: #808080;

                                }

                            }
                        }
                        .checked-box{
                            font-size: 13px;
                            height: 14px;
                            font-weight: normal;
                            margin:  0 20px;
                            line-height: 18px;
                            display: inline-block;
                            position: relative;
                            .text{
                                width: 30px;
                                display: inline-block;

                            }
                            label{
                                position: absolute;
                                    display: inline-block;
                                    top: 3px ;
                                    left: -20px;
                                    width: 12px ;
                                    height: 12px ;
                                    background-color: #fff;
                                border: 1px solid #767676;
                                    border-radius: 50%;
                            }
                            input{
                                z-index: 900;
                                position: absolute;
                                top: 3px ;
                                left: -20px;
                                width: 14px;
                                height: 14px;
                                display: inline-block;
                                padding: 3px;
                                color: #f60;
                                background-color: #f60;
                                opacity: 0;

                                &:checked+label {
                                    // position: absolute;
                                    display: inline-block;
                                    // top: 3px ;
                                    // left: -20px;
                                    width: 12px ;
                                    height: 12px ;
                                    background-color: #f60;
                                    border: 1px solid #f60;
                                    border-radius: 50%;

                                    }
                                &:checked+label::after {
                                    position: absolute;
                                    content: "";
                                    display: inline-block;
                                    top: 50% ;
                                    left: 50%;
                                    transform: translate(-50%,-50%);
                                    width: 4px ;
                                    height:4px ;
                                    border-radius: 50%;
                                    background-color: #fff;
                                    border: 1px solid #fff !important;
                                    }

                            }
                        }
                    }

                    //输入框高亮
                    .item_info_focus{
                        border: 1px solid #f60 !important;
                        background: #fff !important;
                        }
                    .row-input{
                            width: 100%;
                            margin-top: 10px;
                            height: 46px;
                            border: 1px solid #f0f1f4;
                            border-radius: 8px;
                            box-sizing: border-box;
                            display: flex;
                            background: #f0f1f4;
                            transition: all 0.4s;
                            overflow: hidden;

                        input{
                            width: 90%;
                            height: 36px;
                            font-size: 14px;
                            margin: auto;
                            border: none;
                            display: inline-block;
                            background: rgba(240, 241, 244,0);
                            &:focus{outline:none;}
                            &::placeholder {
                            color: #808080;
                            }

                        }
                        .num-max{
                            font-size: 14px;
                            color: #979799;
                            line-height: 46px;
                            margin-right: 8px;
                        }
                        .input-info {
                            width: 100%;
                            resize: none; //去掉右下角斜杠
                            background: #fff;
                            border: 1px solid #f3f3f3;
                            border-radius: 10px;
                            box-sizing: border-box;
                            line-height: 24px;
                            padding: 5px;
                            overflow-x:hidden;
                            overflow-y:hidden;
                            font-family: '微软雅黑';
                            font-size: 14px;
                            &:focus {
                                outline: none;
                            }
                            &::placeholder {
                                color: #c1c1c1;
                            }
                            }

                    }
                    .row-action{
                        margin: 10px 0;
                        display: flex;
                        justify-content: space-between;
                        .action-left{
                            .EmotionButton {
                                width: 30px;
                                height: 30px;
                                margin: 5px 0;
                                display: inline-block;
                                &:hover {
                                    background: rgba($color: #f60, $alpha: 0.2);
                                    i {
                                    color: #f60;
                                    }
                                }
                                border-radius: 50%;
                                .IconfontSize {
                                    cursor: pointer;
                                    font-size: 24px;
                                    margin: 3px;
                                    color: #999;
                                }
                                }
                        }
                        .action-right{
                            display: flex;
                            position: relative;
                            .action-text-num{
                                font-size: 14px;
                                margin: 6px 10px;
                                color: #808080;
                            }
                            .action-state{
                                font-size: 12px;
                                margin-right: 10px;
                                padding-top: 6px;
                                cursor: pointer;
                                color: #808080;

                                .icon-slecet{
                                    i{
                                        font-size: 14px;
                                    }
                                }

                            }
                            .action-state-list{
                                width: 120px;

                                background: #fff;
                                position: absolute;
                                top: 30px;
                                left: -50px;
                                border-radius: 10px;
                                 box-shadow: 2px 2px 5px rgb(224, 224, 224),
                                             -2px -2px 5px rgb(224, 224, 224);
                                .action-state-item{
                                    margin: 10px 0;
                                    padding: 8px 15px;
                                    font-size: 14px;
                                    color: #808080;
                                    text-align: start;
                                    cursor: pointer;
                                    &:hover{
                                        background:rgb(240, 240, 240);
                                    }
                                }
                                .action-state-active{
                                    color: #f60;
                                }

                            }
                            .action-sub{
                                width: 80px;
                                height: 30px;
                                font-size: 14px;
                                color: #fff;
                                line-height: 30px;
                                font-weight: bold;
                                text-align: center;
                                border-radius: 15px;
                                background: #ff8200 ;
                                transition: all 0.2s ;
                                cursor: pointer;

                            }
                            .action-sub-active{
                                background: #ff8200;
                            }

                        }

                    }
                }
            }

        }

    }
    @media screen and (min-width:540px) and (max-width:768px) {
        .article-box{
        width: 100%;
        margin: 0 auto;
        min-height: 1100px;
        background: #fff;
        .article-header{
            width: 60%;
            height: 50px;
            line-height: 50px;
            min-width: 300px;
            margin: 0 auto;
            .article-title{
                 display: flex;
                height: 50px;
                line-height: 50px;
                .article-item{
                    flex: 1;
                    text-align: center;
                    cursor: pointer;
                    &:hover{
                        color: #f60;
                    }
                }
                .article-item-active{
                    font-weight: 700;
                    color: #f60;
                }

            }
        }
        .content-box{
            width: 100%;
            margin: 0 auto;
            border-top: 1px solid rgb(233, 233, 233);
            min-height: 600px;
            .content{
                width: 80%;
                margin-top: 20px;
                min-height: 400px;
                margin: 0 auto;

                .row{
                    width: 100%;
                    margin: 10px 0;
                    padding: 10px 0;
                    padding-bottom: 20px;
                    border-bottom: 1px solid rgb(241, 241, 241);
                    .file-tips{
                        width: 100%;
                        font-size: 12px;
                        line-height: 16px;
                        margin: 10px 0;
                        color: #979799;

                    }
                    .row-video-box{
                      .row-video{
                        width: 100%;
                        margin-top: 25px;
                        min-height: 400px;
                        border: 1px dotted #b4b4b4;
                        box-sizing: border-box;
                        display: flex;
                        flex-wrap: wrap;
                        .file-video{
                            display: none;
                        }
                        .upload-video{
                            margin: auto;
                            width: 200px;
                            height: 200px;
                            .video-tips-icon{
                                width: 100%;
                                text-align: center;
                                i{
                                    font-size: 40px;
                                    color: #808080;
                                }
                            }
                            .video-tips-text{
                                margin-top: 10px;
                                text-align: center;
                                font-size: 14px;
                                 color: #808080;
                            }
                            .video-button{
                                margin-top: 40px;
                                width: 100%;
                                .button-info{
                                    width: 120px;
                                    margin: 0 40px;
                                    height: 36px;
                                    line-height: 36px;
                                    text-align: center;
                                    border-radius: 20px;
                                    font-weight: 700;
                                    color: white;
                                    background: #ff8200;
                                    cursor: pointer;
                                    &:hover{
                                        background: #f60;
                                    }
                                }
                            }

                        }

                    }

                    }
                    .upload-video-loading{
                            width: 100%;
                            height: 250px;
                            background: #fff;
                            .speed-loading{
                                width: 100%;
                                height: 10px;
                                margin-top: 10px;
                                border-radius: 4px;
                                background: #ccc;
                                overflow: hidden;
                                position: relative;
                                .speed-loading-finish{
                                top: 0 ;
                                left: 0;
                                position: absolute;
                                height: 10px;
                                background: #ff8200;
                                transition: width .3s;
                            }
                            }
                            .upload-speed{
                              width: 100%;
                              margin: 3px 0;
                              margin-top: 10px;
                              display: flex;
                              justify-content: space-between;

                              .loading-text{
                                display: flex;
                                div{
                                  display: inline-block;
                                }
                                .text{
                                  width: 60px;
                                  font-size: 12px;
                                }
                                div{
                                  &:nth-of-type(1){
                                    font-size: 12px;
                                  }
                                }
                                .speed-progress{
                                  margin-left: 0px;
                                  font-size: 12px;
                                  color: #f60;
                                }
                              }
                              .loading-right{
                                display: flex;
                                font-size: 12px;

                                .delete{
                                  margin:  0 5px;
                                  span{
                                    cursor: pointer;
                                    &:hover{
                                      color: #f60;
                                    }
                                  }
                                }
                              }
                            }
                            .upload-video-cover{
                              margin-top: 30px;
                              width: 100%;
                              height: 200px;
                               .cover-tips{
                                  font-size: 12px;
                                  color: #979799;
                                  margin-top: 20px;
                                }

                              .video-cover-info{
                                width: 200px;
                                height: 120px;
                                border-radius: 8px;
                                background: #000;
                                overflow: hidden;
                                position: relative;
                                .cover-input{
                                  display: none;
                                }
                                img{
                                  object-fit: cover;

                                  cursor: pointer;
                                  filter: brightness(90%);
                                }
                                .custom-cover{
                                  cursor: pointer;
                                  position: absolute;
                                  bottom: 10px;
                                  left: 10px;
                                  color: #fff;
                                }
                              }

                            }

                        }
                    .row-title{
                        width: 100%;
                        margin-top: 15px;
                        font-size: 22px;
                        color: #000;
                        font-weight: 700;
                        .title-info{
                            margin-right: 20px;
                            position: relative;
                            .explain{
                                cursor: pointer;
                                i{
                                    font-size: 18px;
                                    color: #979799;
                                }
                            }
                            .explain-box{
                                position: absolute;
                                top: -60px;
                                left: 120px;
                                width: 200px;
                                height: 140px;
                                border-radius: 15px;
                                background: #fff;
                                padding: 10px;
                                border: 1px solid #efefef;
                                box-shadow: 3px 2px 2px rgb(240, 240, 240), -3px -2px 2px rgb(240, 240, 240);
                                z-index:901;

                                h2{
                                    text-align: center;
                                    font-size: 16px;
                                    line-height: 24px;
                                }
                                p{
                                    font-size: 12px;
                                    font-weight: normal;
                                    line-height: 20px;
                                    color: #808080;

                                }

                            }
                        }
                        .checked-box{
                            font-size: 13px;
                            height: 14px;
                            font-weight: normal;
                            margin:  0 20px;
                            line-height: 18px;
                            display: inline-block;
                            position: relative;
                            .text{
                                width: 30px;
                                display: inline-block;

                            }
                            label{
                                position: absolute;
                                    display: inline-block;
                                    top: 3px ;
                                    left: -20px;
                                    width: 12px ;
                                    height: 12px ;
                                    background-color: #fff;
                                border: 1px solid #767676;
                                    border-radius: 50%;
                            }
                            input{
                                z-index: 900;
                                position: absolute;
                                top: 3px ;
                                left: -20px;
                                width: 14px;
                                height: 14px;
                                display: inline-block;
                                padding: 3px;
                                color: #f60;
                                background-color: #f60;
                                opacity: 0;

                                &:checked+label {
                                    // position: absolute;
                                    display: inline-block;
                                    // top: 3px ;
                                    // left: -20px;
                                    width: 12px ;
                                    height: 12px ;
                                    background-color: #f60;
                                    border: 1px solid #f60;
                                    border-radius: 50%;

                                    }
                                &:checked+label::after {
                                    position: absolute;
                                    content: "";
                                    display: inline-block;
                                    top: 50% ;
                                    left: 50%;
                                    transform: translate(-50%,-50%);
                                    width: 4px ;
                                    height:4px ;
                                    border-radius: 50%;
                                    background-color: #fff;
                                    border: 1px solid #fff !important;
                                    }

                            }
                        }
                    }

                    //输入框高亮
                    .item_info_focus{
                        border: 1px solid #f60 !important;
                        background: #fff !important;
                        }
                    .row-input{
                            width: 100%;
                            margin-top: 10px;
                            height: 46px;
                            border: 1px solid #f0f1f4;
                            border-radius: 8px;
                            box-sizing: border-box;
                            display: flex;
                            background: #f0f1f4;
                            transition: all 0.4s;
                            overflow: hidden;

                        input{
                            width: 90%;
                            height: 36px;
                            font-size: 14px;
                            margin: auto;
                            border: none;
                            display: inline-block;
                            background: rgba(240, 241, 244,0);
                            &:focus{outline:none;}
                            &::placeholder {
                            color: #808080;
                            }

                        }
                        .num-max{
                            font-size: 14px;
                            color: #979799;
                            line-height: 46px;
                            margin-right: 8px;
                        }
                        .input-info {
                            width: 100%;
                            resize: none; //去掉右下角斜杠
                            background: #fff;
                            border: 1px solid #f3f3f3;
                            border-radius: 10px;
                            box-sizing: border-box;
                            line-height: 24px;
                            padding: 5px;
                            overflow-x:hidden;
                            overflow-y:hidden;
                            font-family: '微软雅黑';
                            font-size: 14px;
                            &:focus {
                                outline: none;
                            }
                            &::placeholder {
                                color: #c1c1c1;
                            }
                            }

                    }
                    .row-action{
                        margin: 10px 0;
                        display: flex;
                        justify-content: space-between;
                        .action-left{
                            .EmotionButton {
                                width: 30px;
                                height: 30px;
                                margin: 5px 0;
                                display: inline-block;
                                &:hover {
                                    background: rgba($color: #f60, $alpha: 0.2);
                                    i {
                                    color: #f60;
                                    }
                                }
                                border-radius: 50%;
                                .IconfontSize {
                                    cursor: pointer;
                                    font-size: 24px;
                                    margin: 3px;
                                    color: #999;
                                }
                                }
                        }
                        .action-right{
                            display: flex;
                            position: relative;
                            .action-text-num{
                                font-size: 14px;
                                margin: 6px 10px;
                                color: #808080;
                            }
                            .action-state{
                                font-size: 12px;
                                margin-right: 10px;
                                padding-top: 6px;
                                cursor: pointer;
                                color: #808080;

                                .icon-slecet{
                                    i{
                                        font-size: 14px;
                                    }
                                }

                            }
                            .action-state-list{
                                width: 120px;

                                background: #fff;
                                position: absolute;
                                top: 30px;
                                left: -50px;
                                border-radius: 10px;
                                 box-shadow: 2px 2px 5px rgb(224, 224, 224),
                                             -2px -2px 5px rgb(224, 224, 224);
                                .action-state-item{
                                    margin: 10px 0;
                                    padding: 8px 15px;
                                    font-size: 14px;
                                    color: #808080;
                                    text-align: start;
                                    cursor: pointer;
                                    &:hover{
                                        background:rgb(240, 240, 240);
                                    }
                                }
                                .action-state-active{
                                    color: #f60;
                                }

                            }
                            .action-sub{
                                width: 80px;
                                height: 30px;
                                font-size: 14px;
                                color: #fff;
                                line-height: 30px;
                                font-weight: bold;
                                text-align: center;
                                border-radius: 15px;
                                background: #ff8200 ;
                                transition: all 0.2s ;
                                cursor: pointer;

                            }
                            .action-sub-active{
                                background: #ff8200;
                            }

                        }

                    }
                }
            }

        }

    }
    }
     @media screen and (max-width:540px) {
        .article-box{
        width: 100%;
        margin: 0 auto;
        min-height: 1100px;
        background: #fff;
        .article-header{
            width: 60%;
            height: 1rem;
            line-height: 1rem;
            min-width: 300px;
            margin: 0 auto;
            .article-title{
                 display: flex;
                height: 1rem;
                line-height: 1rem;
                .article-item{
                    flex: 1;
                    text-align: center;
                    cursor: pointer;
                    &:hover{
                        color: #f60;
                    }
                }
                .article-item-active{
                    font-weight: 700;
                    color: #f60;
                }

            }
        }
        .content-box{
            width: 100%;
            margin: 0 auto;
            border-top: 1px solid rgb(233, 233, 233);
            min-height: 600px;
            .content{
                width: 100%;
                margin-top: 20px;
                min-height: 400px;
                margin: 0 auto;

                .row{
                    width: 90%;
                    margin: 0 auto;
                    padding: .2rem 0;
                    padding-bottom: .4rem;
                    border-bottom: 1px solid rgb(241, 241, 241);
                    .file-tips{
                        width: 100%;
                        font-size: .25rem;
                        line-height: 16px;
                        margin: 10px 0;
                        color: #979799;

                    }
                    .row-video-box{
                      .row-video{
                        width: 100%;
                        margin-top: .5rem;
                        min-height: 300px;
                        border: 1px dotted #b4b4b4;
                        box-sizing: border-box;
                        display: flex;
                        flex-wrap: wrap;
                        .file-video{
                            display: none;
                        }
                        .upload-video{
                            margin: auto;
                            width: 200px;
                            height: 200px;
                            .video-tips-icon{
                                width: 100%;
                                text-align: center;
                                i{
                                    font-size: 40px;
                                    color: #808080;
                                }
                            }
                            .video-tips-text{
                                margin-top: 10px;
                                text-align: center;
                                font-size: 14px;
                                 color: #808080;
                            }
                            .video-button{
                                margin-top: 40px;
                                width: 100%;
                                .button-info{
                                    width: 120px;
                                    margin: 0 40px;
                                    height: 36px;
                                    line-height: 36px;
                                    text-align: center;
                                    border-radius: 20px;
                                    font-weight: 700;
                                    color: white;
                                    background: #ff8200;
                                    cursor: pointer;
                                    &:hover{
                                        background: #f60;
                                    }
                                }
                            }

                        }

                    }

                    }
                    .upload-video-loading{
                            width: 100%;
                            height: 250px;
                            background: #fff;
                            .speed-loading{
                                width: 100%;
                                height: 10px;
                                margin-top: 10px;
                                border-radius: 4px;
                                background: #ccc;
                                overflow: hidden;
                                position: relative;
                                .speed-loading-finish{
                                top: 0 ;
                                left: 0;
                                position: absolute;
                                height: 10px;
                                background: #ff8200;
                                transition: width .3s;
                            }
                            }
                            .upload-speed{
                              width: 100%;
                              margin: 3px 0;
                              margin-top: 10px;
                              display: flex;
                              justify-content: space-between;

                              .loading-text{
                                display: flex;
                                div{
                                  display: inline-block;
                                }
                                .text{
                                  width: 60px;
                                  font-size: 12px;
                                }
                                div{
                                  &:nth-of-type(1){
                                    font-size: 12px;
                                  }
                                }
                                .speed-progress{
                                  margin-left: 0px;
                                  font-size: 12px;
                                  color: #f60;
                                }
                              }
                              .loading-right{
                                display: flex;
                                font-size: 12px;

                                .delete{
                                  margin:  0 5px;
                                  span{
                                    cursor: pointer;
                                    &:hover{
                                      color: #f60;
                                    }
                                  }
                                }
                              }
                            }
                            .upload-video-cover{
                              margin-top: 30px;
                              width: 100%;
                              height: 200px;
                               .cover-tips{
                                  font-size: 12px;
                                  color: #979799;
                                  margin-top: 20px;
                                }

                              .video-cover-info{
                                width: 200px;
                                height: 120px;
                                border-radius: 8px;
                                background: #000;
                                overflow: hidden;
                                position: relative;
                                .cover-input{
                                  display: none;
                                }
                                img{
                                  object-fit: cover;

                                  cursor: pointer;
                                  filter: brightness(90%);
                                }
                                .custom-cover{
                                  cursor: pointer;
                                  position: absolute;
                                  bottom: 10px;
                                  left: 10px;
                                  color: #fff;
                                }
                              }

                            }

                        }
                    .row-title{
                        width: 100%;
                        margin-top: 15px;
                        font-size: .45rem;
                        color: #000;
                        font-weight: 700;
                        .title-info{
                            margin-right: 20px;
                            position: relative;
                            .explain{
                                cursor: pointer;
                                i{
                                    font-size: 18px;
                                    color: #979799;
                                }
                            }
                            .explain-box{
                                position: absolute;
                                top: -60px;
                                left: 120px;
                                width: 200px;
                                height: 140px;
                                border-radius: 15px;
                                background: #fff;
                                padding: 10px;
                                border: 1px solid #efefef;
                                box-shadow: 3px 2px 2px rgb(240, 240, 240), -3px -2px 2px rgb(240, 240, 240);
                                z-index:901;

                                h2{
                                    text-align: center;
                                    font-size: 16px;
                                    line-height: 24px;
                                }
                                p{
                                    font-size: 12px;
                                    font-weight: normal;
                                    line-height: 20px;
                                    color: #808080;

                                }

                            }
                        }
                        .checked-box{
                            font-size: 13px;
                            height: 14px;
                            font-weight: normal;
                            margin:  0 .4rem;
                            line-height: 18px;
                            display: inline-block;
                            position: relative;
                            .text{
                                width: 30px;
                                display: inline-block;

                            }
                            label{
                                position: absolute;
                                    display: inline-block;
                                    top: 3px ;
                                    left: -20px;
                                    width: 12px ;
                                    height: 12px ;
                                    background-color: #fff;
                                border: 1px solid #767676;
                                    border-radius: 50%;
                            }
                            input{
                                z-index: 900;
                                position: absolute;
                                top: 3px ;
                                left: -20px;
                                width: 14px;
                                height: 14px;
                                display: inline-block;
                                padding: 3px;
                                color: #f60;
                                background-color: #f60;
                                opacity: 0;

                                &:checked+label {
                                    // position: absolute;
                                    display: inline-block;
                                    // top: 3px ;
                                    // left: -20px;
                                    width: 12px ;
                                    height: 12px ;
                                    background-color: #f60;
                                    border: 1px solid #f60;
                                    border-radius: 50%;

                                    }
                                &:checked+label::after {
                                    position: absolute;
                                    content: "";
                                    display: inline-block;
                                    top: 50% ;
                                    left: 50%;
                                    transform: translate(-50%,-50%);
                                    width: 4px ;
                                    height:4px ;
                                    border-radius: 50%;
                                    background-color: #fff;
                                    border: 1px solid #fff !important;
                                    }

                            }
                        }
                    }

                    //输入框高亮
                    .item_info_focus{
                        border: 1px solid #f60 !important;
                        background: #fff !important;
                        }
                    .row-input{
                            width: 100%;
                            margin-top: 10px;
                            height: 46px;
                            border: 1px solid #f0f1f4;
                            border-radius: 8px;
                            box-sizing: border-box;
                            display: flex;
                            background: #f0f1f4;
                            transition: all 0.4s;
                            overflow: hidden;

                        input{
                            width: 90%;
                            height: 36px;
                            font-size: 14px;
                            margin: auto;
                            border: none;
                            display: inline-block;
                            background: rgba(240, 241, 244,0);
                            &:focus{outline:none;}
                            &::placeholder {
                            color: #808080;
                            }

                        }
                        .num-max{
                            font-size: 14px;
                            color: #979799;
                            line-height: 46px;
                            margin-right: 8px;
                        }
                        .input-info {
                            width: 100%;
                            resize: none; //去掉右下角斜杠
                            background: #fff;
                            border: 1px solid #f3f3f3;
                            border-radius: 10px;
                            box-sizing: border-box;
                            line-height: 24px;
                            padding: 5px;
                            overflow-x:hidden;
                            overflow-y:hidden;
                            font-family: '微软雅黑';
                            font-size: 14px;
                            &:focus {
                                outline: none;
                            }
                            &::placeholder {
                                color: #c1c1c1;
                            }
                            }

                    }
                    .row-action{
                        margin: 10px 0;
                        display: flex;
                        justify-content: space-between;
                        .action-left{
                            .EmotionButton {
                                width: 30px;
                                height: 30px;
                                margin: 5px 0;
                                display: inline-block;
                                &:hover {
                                    background: rgba($color: #f60, $alpha: 0.2);
                                    i {
                                    color: #f60;
                                    }
                                }
                                border-radius: 50%;
                                .IconfontSize {
                                    cursor: pointer;
                                    font-size: 24px;
                                    margin: 3px;
                                    color: #999;
                                }
                                }
                        }
                        .action-right{
                            display: flex;
                            position: relative;
                            .action-text-num{
                                font-size: 14px;
                                margin: 6px 10px;
                                color: #808080;
                            }
                            .action-state{
                                font-size: 12px;
                                margin-right: 10px;
                                padding-top: 6px;
                                cursor: pointer;
                                color: #808080;

                                .icon-slecet{
                                    i{
                                        font-size: 14px;
                                    }
                                }

                            }
                            .action-state-list{
                                width: 120px;

                                background: #fff;
                                position: absolute;
                                top: 30px;
                                left: -50px;
                                border-radius: 10px;
                                 box-shadow: 2px 2px 5px rgb(224, 224, 224),
                                             -2px -2px 5px rgb(224, 224, 224);
                                .action-state-item{
                                    margin: 10px 0;
                                    padding: 8px 15px;
                                    font-size: 14px;
                                    color: #808080;
                                    text-align: start;
                                    cursor: pointer;
                                    &:hover{
                                        background:rgb(240, 240, 240);
                                    }
                                }
                                .action-state-active{
                                    color: #f60;
                                }

                            }
                            .action-sub{
                                width: 80px;
                                height: 30px;
                                font-size: 14px;
                                color: #fff;
                                line-height: 30px;
                                font-weight: bold;
                                text-align: center;
                                border-radius: 15px;
                                background: #ff8200 ;
                                transition: all 0.2s ;
                                cursor: pointer;

                            }
                            .action-sub-active{
                                background: #ff8200;
                            }

                        }

                    }
                }
            }

        }

    }
    }
</style>
